// 个人信息

<template>
  <view>
    <view class="items-box">
      <view class="item" @tap="setPhone">
        <view class="item-title">手机绑定</view>
        <view class="item-content">
          <text class="text1" :style="{ color: userInfo.mobile ? '#111' : '' }">
            {{ userInfo.mobile ? userInfo.mobile : '去绑定' }}
          </text>
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
      <view class="item" @tap="setPassword">
        <view class="item-title">登录密码</view>
        <view class="item-content">
          <text class="text1">
            {{ hasLoginPassword ? '去修改' : '去设置' }}
          </text>
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
    </view>
    <view class="logout" @tap="logout">退出账号</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null,
      hasLoginPassword: true
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
  },
  methods: {
    // 设置手机
    setPhone() {
      uni.navigateTo({
        url: '/pages/my/commonFunction/accountManagement/bindPhone'
      })
    },
    // 设置密码
    setPassword() {
      uni.navigateTo({
        url: '/pages/my/commonFunction/accountManagement/changePassword'
      })
    },
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '是否确认退出账号？',
        success: async ({ confirm }) => {
          if (confirm) {
            const res = await this.$http.post('/api/kuerp/order/user/logout')
            if (res.code == 1) {
              uni.showToast({
                title: res.msg,
                icon: 'success',
                mask: true
              })
              uni.clearStorageSync()
              setTimeout(() => {
                uni.reLaunch({ url: '/pages/login/index' })
              }, 500)
            }
          }
        }
      })
    }
  }
}
</script>

<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.items-box {
  margin-top: 20rpx;
  background-color: #fff;
  color: #111111;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 694rpx;
    height: 120rpx;
    margin: 0 auto;
    border-bottom: 1px solid #dedede;
    &:last-child {
      border-bottom: none;
    }
    .item-title {
    }
    .item-content {
      display: flex;
      align-items: center;
      .text1 {
        color: #999;
      }
      .icon-jiantou {
        margin-left: 10rpx;
        font-size: 22rpx;
        color: #333333;
      }
    }
  }
}

.logout {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120rpx;
  margin-top: 20rpx;
  background: #ffffff;
  color: #ff1100;
}
</style>
